.editor *[contenteditable='true']:focus-visible {
  outline: 0 !important;
}

.editor {
  @apply leading-loose;

  caret-color: theme(colors.primary);
}

.editor,
.editor :global(.milkdown),
.editor :global([data-milkdown-root='true']),
.editor :global([contenteditable='true']) {
  height: 100%;
}

.editor h1 {
  font-size: 1.2rem;
  font-weight: 500;
}

.editor h2 {
  font-size: 1.15rem;
  font-weight: 500;
}

.editor h3 {
  font-size: 1.1rem;
  font-weight: 500;
}

.editor h4 {
  font-size: 1.05rem;
  font-weight: 500;
}

.editor a {
  @apply text-accent underline;
}

.editor blockquote {
  @apply border-l-4  border-accent pl-4 font-serif not-italic;
}

.editor code:not(pre > code) {
  @apply inline-block rounded-sm bg-slate-200/50 p-1 font-mono font-normal text-accent;
}

.editor p {
  @apply my-2;
}

[data-theme='dark'] .editor a {
  @apply text-accent;
}

[data-theme='dark'] .editor blockquote {
  @apply border-accent;
}

[data-theme='dark'] .editor code:not(pre > code) {
  @apply bg-slate-800/50 text-accent;
}

.editor pre code {
  @apply text-inherit;
}

.editor img {
  @apply !my-0 inline-block max-w-full;
}

.editor .tableWrapper {
  @apply relative mb-2 overflow-x-auto;
}

.editor table {
  @apply !m-4 !overflow-visible text-sm shadow-md sm:rounded-lg;
}

.editor td,
.editor th {
  @apply !px-6 !py-3;
}

.editor tr {
  @apply border-b border-gray-200 dark:border-gray-600;
}

[data-theme='dark'] .editor tr {
  @apply border-gray-600;
}

.editor :where(td, th) p {
  @apply !m-0;
}

.editor :where(td, th):nth-child(odd) {
  @apply bg-gray-50;
}

[data-theme='dark'] .editor :where(td, th):nth-child(odd) {
  @apply bg-gray-900;
}

.editor.ProseMirror .selectedCell:after {
  @apply bg-accent/30;
}

/* A little workaround to turn the element into a space */
.editor br[data-is-inline='true'],
.editor br[data-is-inline='true']::after {
  content: ' ';
}

.editor ul {
  @apply list-inside list-disc;
}

.editor ol {
  @apply list-inside list-decimal;
}

.editor li > p {
  @apply inline;
}

.editor {
  font-size: 14px;
}

.editor pre {
  @apply rounded-md bg-slate-200 p-2;
}

[data-theme='dark'] .editor pre {
  @apply bg-neutral-800;
}
